<template>
  <div id="app">
    <!--
    router-link 默认渲染是a 标签，可以自己去浏览器看一下
    to 属性  跳转
    tag 是改变渲染的标签  tag=button
    replace 这个属性 代表 使用 history.replaceState  2个跳转不可以来回在浏览器上切换，只能点击按钮触发
     -->

    <router-link to="/home" tag="button" replace >首页</router-link>
    <router-link to="/about" tag="button" replace >关于</router-link>
    <!-- vue 动态绑定  v-bind -->
    <router-link :to="'/user/'+userId" tag="button" replace >用户</router-link>

<!--    <button @click="homeClick">home</button>-->
<!--    <button @click="aboutClick">about</button>-->
    <!-- keep-alive 代表该组件会被缓存  exclude="About,User" 不希望被缓存的组件  -->
    <keep-alive exclude="About,User">
      <router-view></router-view>
    </keep-alive>
    <h2>我是底部标签</h2>
  </div>
</template>

<script>
/**
 * 假设我们不用 router-link  自己写点击跳转触发事件,
 * 目前发现长时间点击一个按钮，一直替换前端会报错
 *  NavigationDuplicated: Avoided redundant navigation to current location: "/about".
 *  升级 vue 3.0 可解决，百度很多，不说啦,当然还可以然点击选择的按钮，不在触发点击时间，价格变量等等
 *  但是router-link to 是没有问题的
 */
export default {
  name: 'App',
  data(){
    return {
      userId: 'zhangsan'
    }
  },
  methods: {
    homeClick(){
      console.log(this.$router);
      // this.$router.push("/home")
      this.$router.replace("/home")
      console.log("homeClick")
    },
    aboutClick(){
      // this.$router.push("/about")
      this.$router.replace("/about")
      console.log("aboutClick");
    }
  }
}
</script>

<style>
.router-link-active{
  background: red;
}
</style>
